<template>
  <div class="drag">
    <div class="drag-title">
      <d-button>生成组件</d-button>
      <d-button @click="handleRevoke">撤销</d-button>
      <d-button @click="handleEmpty">清空</d-button>
    </div>
    <div class="drag-box">
      <div class="drag-box-left">
        <div class="assembly">
          <div v-for="(item,index) in leftAssembly" :key="index" class="assembly-item">
            <h3>{{item.title}}</h3>
            <div class="assembly-item-son">
              <div class="assembly-from" v-for="(item_son, index_son) in item.children" :key="index_son">
                <i class=""></i>
                <span>{{item_son.text}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="drag-box-content" v-draggable>
        <button >454545</button>
      </div>
      <div class="drag-box-right"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      leftAssembly: [
        {
          title: '布局组件',
          children: [
            {
              icon: '',
              text: '栅格布局'
            },
            {
              icon: '',
              text: '间距'
            }
          ]
        },
        {
          title: '表单组件',
          children: [
            {
              icon: '',
              text: '输入框'
            },
            {
              icon: '',
              text: '单选框'
            },
            {
              icon: '',
              text: '下拉框'
            },
            {
              icon: '',
              text: '日期选择'
            },
            {
              icon: '',
              text: '多选框'
            }
          ]
        },
        {
          title: '辅助组件',
          children: [
            {
              icon: '',
              text: '提示'
            },
            {
              icon: '',
              text: '按钮'
            },
            {
              icon: '',
              text: '文字'
            },
            {
              icon: '',
              text: '分割线'
            }
          ]
        }
      ],
      contentAssembly: []
    }
  },
  methods: {
    // 拖拽组件
    handleDargDrop(item) {
      this.contentAssembly.push(item)
    },
    // 撤销
    handleRevoke() {
      this.contentAssembly.pop()
    },
    // 清空
    handleEmpty() {
      this.contentAssembly = []
    },
    debounceClick() {
      console.log(1)
    }
  }
}
</script>
<style lang="scss" scoped>
$text-color: #333333;
$border-color: #e8e8e8;
$internal-spacing: .625rem;
.drag{
  .drag-title{
    height: 4rem;
    line-height: 4rem;
    border-bottom: 1px solid $border-color;
    button {
      margin-left: $internal-spacing;
    }
  }
  .drag-box{
    display: flex;
    height: calc(100vh - 4rem);
    .drag-box-left {
      min-width: 18.75rem;
      padding: $internal-spacing;
      border-right: 1px solid $border-color;
      .assembly{
        .assembly-item{
          h3{
            font-size: 1.1875rem;
            font-weight: 500;
            color: $text-color;
            padding: $internal-spacing 0;
          }
          .assembly-item-son{
            padding: 10;
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: $internal-spacing;
            .assembly-from{
              cursor: pointer;
              i{
                color: $text-color;
              }
              span{
                display: block;
                font-size: .9375rem;
              }
            }
          }
        }
      }
    }
    .drag-box-right{
      min-width: 18.75rem;
    }
    .drag-box-content{
      flex: 1;
      position: relative;
      button{
        position: absolute;
      }
    }
  }
}
</style>
